<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <link rel="stylesheet"
          href="semantic_files/semantic/dist/semantic.min.css">

    <script src="css/jquery-3.1.1.min.js"></script>

    <script src="semantic_files/semantic/dist/semantic.min.js"></script>

    <script src="css/vue.min.js"></script>

    <script src="css/axios.min.js"></script>

</head>
<style type="text/css">
    body {
        background-image: url("images/cats/c4.jpg");
        background-repeat: no-repeat;
    }

    body > .grid {
        height: 100%;
    }

    .image {
        margin-top: -100px;
    }

    .column {
        max-width: 450px;
    }
</style>
<script>
    $(document)
        .ready(function () {
            $('.ui.form')
                .form({
                    fields: {
                        phone: {
                            identifier: 'phone',
                            rules: [
                                {
                                    type: 'empty',
                                    prompt: '请输入您的电话号码！'
                                },
                                {
                                    type: 'regExp',
                                    value: /^1[3456789]\d{9}$/,
                                    prompt: '电话号码格式不正确！'
                                }
                            ]
                        },
                        password: {
                            identifier: 'password',
                            rules: [
                                {
                                    type: 'empty',
                                    prompt: '请输入您的密码'
                                },
                                {
                                    type: 'length[6]',
                                    prompt: '密码至少需要6位！'
                                }
                            ]
                        },
                        gender: {
                            identifier: 'gender',
                            rules: [
                                {
                                    type: 'empty',
                                    prompt: '请选择您的性别'
                                }
                            ]
                        },
                        utype: {
                            identifier: 'utype',
                            rules: [
                                {
                                    type: 'empty',
                                    prompt: '请选择您的用户种类'
                                }
                            ]
                        },
                        nick: {
                            identifier: 'nick',
                            rules: [
                                {
                                    type: 'empty',
                                    prompt: '请输入您的昵称'
                                }
                            ]
                        }
                    }
                })
            ;
        })
    ;
</script>

</head>
<body>

<div id="app">
    <div class="ui middle aligned center aligned grid">
        <div class="column">
            <img src="images/index/logo.png" class="image" style="height: 200px;width: auto;margin-top: 5px">

            <!--注册抬头-->
            <h2 class="ui teal header">
                <div class="content" style="color: darkorange;">
                    <br/>
                    Hey，终于等到你~
                </div>
            </h2>

            <!--注册界面-->
            <div class="ui large form">
                <div class="ui stacked segment left aligned">
                    <div class="field">
                        <label>手机号：</label>
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            <input type="text" name="phone" placeholder="电话号码" v-model="phone">
                        </div>
                    </div>

                    <div class="field">
                        <label>性别：</label>
                        <select name="gender" class="ui fluid dropdown" v-model="gender">
                            <option value="">--选择性别--</option>
                            <option value="1">男</option>
                            <option value="2">女</option>
                            <option value="3">其他或保密</option>
                        </select>
                    </div>

                    <div class="field">
                        <label>昵称：</label>
                        <div class="ui left icon input">
                            <i class="smile outline icon"></i>
                            <input type="text" name="nick" placeholder="昵称" v-model="nick">
                        </div>
                    </div>

                    <div class="field">
                        <label>密码：</label>
                        <div class="ui left icon input">
                            <i class="lock icon"></i>
                            <input type="password" name="password" placeholder="密码" v-model="password">
                        </div>
                    </div>

                    <div class="field">
                        <label>用户类型</label>
                        <select name="utype" class="ui fluid dropdown" v-model="utype">
                            <option value="">--选择类型--</option>
                            <option value="1">个人用户</option>
                            <option value="2">商户</option>
                        </select>
                    </div>

                    <div class="ui fluid large teal submit button" @click="register"
                         style="background-color: darkorange">注册
                    </div>
                </div>

                <div id="errortip" class="ui error message"></div>
                <div id="checking" class="ui success message">
                    <div id="checkheader" class="header">注册信息提交成功！</div>
                    <p id="checkmsg">正在为您进行注册~</p>
                </div>
            </div>

            <div id="failure" class="ui message" style="display: none;border: red;color: red">
                <div id="failureheader" class="header">手机号已经被注册</div>
                <p id="failuremsg">请更换手机号进行注册~</p>
            </div>

            <div class="ui message">
                已经有帐号了？ 那赶紧点这里<i class="hand point right outline icon"></i> <a href="login.html">立即登录</a>
            </div>
        </div>
    </div>
</div>
</body>

<!--进行用户信息的注册和页面跳转 本网页用的vue 也可以采用Semantic UI的功能-->
<script>

    var ue = new Vue({
        el: "#app",
        data: {
            phone: null,
            gender: "",
            password: null,
            nick: null,
            utype: ""
        },
        methods: {
            register: function () {
                // alert($("#errortip").css("display"))
                // alert(this.phone)
                // alert(this.password)
                // alert(this.nick)
                // alert(this.gender)
                // alert(this.utype)
                if ($("#errortip").css("display") == "none"
                    && this.phone != null
                    && this.password != null
                    && this.nick != null
                    && this.gender != null
                    && this.utype != null){
                    axios.post("rg", {
                        phone: this.phone,
                        pwd: this.password,
                        gender: this.gender,
                        nick: this.nick,
                        utype: this.utype
                    }).then(function (response) {
                        if (response.data.respStatusCode == 200) {
                            $("#failure").css("display", "none")
                            $("#checkheader").text("注册成功")
                            $("#checkmsg").text("欢迎加入我们~即将为您进行登录页面跳转")
                            $("#checking").css("display", "block");
                            window.setTimeout(function () {
                                window.location.href = "login.html"
                            }, 3000)
                        } else if(response.data.respStatusCode == 50){
                            $("#checking").css("display", "none")
                            $("#failure").css("display", "block")
                            $("#failureheader").text("手机号已经被注册")
                            $("#failuremsg").text("请重新注册~")
                        } else {
                            $("#checking").css("display", "none")
                            $("#failure").css("display", "block")
                            $("#failureheader").text("其他错误：注册失败")
                            $("#failuremsg").text("请联系管理员~")
                        }
                    })
                }
            }
        }
    })
</script>
</html>